import { ModalProps } from 'antd';
import { Collapse } from 'antd';
import { ThoughtChainItem } from '@/types/chat';
import { SvgIcon } from '@/components/icon';

import '../styles/chat.css';
type Props = {
  thoughtListAll: ThoughtChainItem;
  keyArr: string[];
  setKeyArr: (keys: string[]) => void;

} & ModalProps;

const Thought = ({ thoughtListAll, keyArr, setKeyArr }: Props) => {

  return (
    <Collapse
      // defaultActiveKey={['1','2']}
      activeKey={keyArr}
      onChange={(e) => {
        console.log(e);
        setKeyArr(e)
      }}
      // ghost
      bordered={false}
      items={thoughtListAll}
      style={{ border: 'none', borderRadius: '12px', backgroundColor: '#00134D0A', marginBottom: '11px'}}
      expandIconPosition={'end'}
      expandIcon={({ isActive }) =>
        isActive ? (
          <SvgIcon icon="ai-chat-down" size="12" />
        ) : (
          <SvgIcon icon="ai-chat-right" size="12" />
        )
      }
      className="collapse-buttom"
    />
  );
};

export default Thought;
